<template>
  <w-view :commands="commands" :scroll-y="!true">

    <!--    <w-view template="url(widget.php?act=dynform)"></w-view>
 -->
    <w-buttonbar gap="10" height="40" align="right">
      <w-button @click="alert" text="alert" />
      <w-button @click="confirm" text="confirm" />
      <w-button @click="loading" text="loading" />
      <w-button @click="save" text="save" />
      <w-button @click="cancel" text="cancel" />
    </w-buttonbar>

    <w-grid gap=10 style="padding: 10px" :default-colspan="4">

      <section class="section" v-colspan="colspan">
        <div class="header" @click="dateSheet">Picker {{data.org}}</div>
        <w-slidepicker height=280 @change="pickerChange" min-value="002">
          <w-option value="001" text="Atlanta"></w-option>
          <w-option value="002" text="Berlin"></w-option>
          <w-option value="003" text="Boston"></w-option>
          <w-option value="004" text="Chicago"></w-option>
          <w-option value="005" text="London"></w-option>
          <w-option value="006" text="Los Angeles"></w-option>
          <w-option value="007" text="New York"></w-option>
          <w-option value="008" text="Paris"></w-option>
          <w-option value="009" text="San Francisco"></w-option>
        </w-slidepicker>
      </section>

      <!-- <w-textarea name="log" :colspan="colspan" height="300"></w-textarea> -->

      <section class="section" :colspan="colspan">
        <div class="header">Tree</div>
        <w-tree ref="tree" height=280 :scroll-x="true" :scroll-y="true" :pub="treePub" :current="{'org.orgId': focusLeafID}">
        <w-leaf key="root" :expanded="true" :folder="true" template="task/TaskLeaf" :data="treeList" :hasBox="true"
            @contextmenu.prevent="contextmenu">
          </w-leaf>
          <!-- <task-leaf :data="treeList"></task-leaf> -->
        </w-tree>
      </section>

      <section class="section" :colspan="colspan">
        <div class="header">Calendar</div>

        <w-calendar format="yyyy-MM-dd" class="x-cal" :value="calendarValue" @change="changeCal" @click:item="clickCal" :current="currentCal" :pad="!true">
        </w-calendar>

      </section>

      <section class="section" :colspan="colspan">
        <div class="header">Progress {{data.focusId}}</div>
        <w-progress class="x-progress" :percent="progressPercent" :text="progressPercent + '%'" range="30,60,100">
        </w-progress>
        <w-html valign="middle" height=60>APIAPI APIAPI APIAPI APIAPI <em>APIAPI</em> NPM NPM NPM NPM NPM NPM</w-html>
      </section>

      <section class="section" :colspan="colspan">
        <div class="header">Album</div>
        <w-album gap="10" style="padding: 10px">
          <w-img src="#f-svg-loading-3" :vertical="!false">.f-i-long-arrow-left</w-img>
          <w-img src="http://tp3.sinaimg.cn/2622821682/180/5662155841/1" img-width="70" text="顺丰" :vertical="!false">
          </w-img>
          <w-img :src="logoUrl" width=70 :square="true"></w-img>
        </w-album>
      </section>

      <section class="section" :colspan="colspan">
        <div class="header">Timeline</div>
        <w-timeline :vertical="!true" :scroll-x="true" :scroll-y="true">
          <w-timeline-item class="x-year">
            <template #icon>2021</template>
            卖家已发货<br>2015-09-01
          </w-timeline-item>
          <w-timeline-item position="bottom" class="x-qq">
            <template #icon><i class="f-i f-i-qq"></i></template>
            2015-09-01<br>
            商品已经下单
          </w-timeline-item>
          <w-timeline-item position="">已揽件 2015-09-01</w-timeline-item>
          <w-timeline-item position="">包裹正在等待揽收 2015-09-01</w-timeline-item>
          <w-timeline-item position="bottom">已揽件 2015-09-01</w-timeline-item>
        </w-timeline>
      </section>

    </w-grid>
    <w-menu v-if="showMenu" @close="showMenu=false" :snap="{target:menuTarget}">
      <w-button text="新建" @click="createSub"></w-button>
      <w-button text="删除"></w-button>
    </w-menu>
    <w-dialog :width="200" height="500" :fullScreen="fullScreen" :local="!true" :cover="workflowPosistion == 'r'" @click:cover="clickCover" class="workflow-dialog" :position="workflowPosistion">
      <i class="workflow-dialog-toggle f-i f-i-angle-left" @click="workflowToggle"></i>
      <w-html @click="dialogMinMax">流程状态</w-html>
    </w-dialog>
  </w-view>
</template>

<script>
  import $ from '../dfish.js'
  import {
    ref
  } from 'vue'
  import TaskLeaf from '@/components/task/TaskLeaf.vue'

  export default {
    components: {
      TaskLeaf
    },
    provide() {
      return {
        context: this
      }
    },
    inject: ['indexView'],
    watch: {
      'data.focusId'(v) {
        console.log(v)
      }
    },
    props: ['data'],
    data() {
      return {
        fullScreen: false,
        workflowPosistion: '-r',
        calendarValue: '2021-10-01',
        currentCal: null,
        timelineList: [],
        testList: [1, 2],
        msg: '',
        colspan: $.br.mobile ? 12 : 4,
        logoUrl: '',//require('../assets/logo1.png'),
        focusLeafID: '',
        progressPercent: 50,
        showMenu: false,
        menuTarget: null,
        treePub: {
          expanded: !true,
          on: {
            click: this.clickLeaf
          },
        },
        treeList: {
          id: '100',
          org: {
            orgId: '100'
          },
          icon: '.f-i-qq',
          text: '福建省',
          expanded: true,
          checked: true,
          children: [
            {
              id: '120',
              org: {
                orgId: '120'
              },
              text: '厦门市'
            }
          ]
        },
        commands: {
          'edit': {
            type: 'Dialog',
            template: 'task/TaskForm',
            preload: 'DialogStd',
            class: 'large',
          },
        }
      }
    },
    methods: {
      clickCover(e) {
        this.workflowToggle()
      },
      workflowToggle() {
        this.workflowPosistion = this.workflowPosistion == 'r' ? '-r' : 'r'
      },
      dialogMinMax() {
        this.fullScreen = !this.fullScreen
      },
      dateSheet(e) {
        $.dateSheet({
          value: '2020-09-08',
          minValue: '2020-07-05',
          maxValue: '2025-11-01',
          format: 'yyyy-ww',
          success: (v) => console.log(v)
        })
      },
      pickerChange(e, data) {
        this.msg = data
      },
      alert() {
        $.alert('所以说啊', 'br')
      },
      confirm() {
        
        $.confirm({
          title: '操作提示',
          text: '<div>真的这么搞？</div>',
          no: () => console.log('确定')
        })
      },
      loading(e) {
        $(e).cmd({
          type: 'Loading'
        })
        return;
      },
      save(e) {

      },
      cancel(e) {
        this.timelineList = [{
          text: '2商品已经下单 2015-09-01',
          position: 'left'
        }, {
          text: '2卖家已发货 2015-09-01',
          position: 'left'
        }]
      },
      clickLeaf(e) {
        this.focusLeafID = $(e).data.id
      },
      clickCal(e, item) {
        this.currentCal = item.value
      },
      changeCal(e, date) {
        console.log(date)
      },
      contextmenu(e) {
        this.showMenu = true
        this.menuTarget = e
      },
      calText(item) {
        let d = item.date.getDate()
        return '第' + d + '天'
      },
      createSub(e) {
        console.log($(this.menuTarget).data)
      },
      test(i) {
        return i + 'dd'
      }
    },
    mounted() {
      for (var i = 0; i < 1; i++) {
        this.treeList.children.push({id: i, text: i, org: {orgId: i}})
      }
      setTimeout(() => {
        this.timelineList = [{
          text: '商品已经下单 2015-09-01',
          position: 'right'
        }, {
          text: '卖家已发货 2015-09-01'
        }, {
          text: '包裹正在等待揽收 2015-09-01'
        }]
      }, 300)
    }
  }
</script>

<style>
  .section {
    border: 1px solid #b0e1ee;
  }

  .header {
    height: 40px;
    line-height: 40px;
    text-indent: 10px;
    background-color: #b0e1ee;
  }

  .x-progress.z-60 .w-progress-gut {
    background: #fd7921;
  }

  .x-year .w-timeline-item-icon-img {
    background: #fff;
    border: 2px solid var(--w--focus-color);
    border-radius: 100px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .x-qq .f-i-qq {
    display: inline-block;
    width: 30px;
    height: 30px;
    color: var(--w--focus-color)
  }

  .x-qq .f-i-qq:before {
    font-size: 30px;
  }
  
  .x-cal .w-calendar-head-prev {
    order: 1;
  }
  .x-cal .w-calendar-head-prev:before {
    content: '\e68e';
    color: rgb(62,143,255);
    font-size: 16px;
    margin-right: 10px;
  }
  .x-cal .w-calendar-head-next {
    order: 2;
  }
  .x-cal .w-calendar-head-next:before {
    content: '\e690';
    color: rgb(62,143,255);
    font-size: 16px;
  }
  .x-cal .w-calendar-head-now {
    display: none;
  }
  
  .workflow-dialog {
    border: 1px solid #f00;
    background: #FFF;
  }
  
  .workflow-dialog-toggle {
    position: absolute;
    left: -18px;
    top: 50%;
    background: lightpink;
  }
  
</style>
